import React, { useState } from "react";
import { Input, Button, Dropdown, Space, message, Divider } from "antd";
import type { MenuProps } from "antd";
import { DownOutlined } from "@ant-design/icons";
import center_search from "@/assets/images/center_search.png";

// AudioOutlined,FileSearchOutlined
import "./Sreach.less";

// 定义前缀组件
// select焦点获取失败，menu渲染有问题,所以采用Dropdown
const LeftSearch: React.FC = () => {
  // 使用 useState 管理选中的菜单项
  const [selectedItem, setSelectedItem] = useState<string>("综合");

  // 菜单项
  const items: MenuProps["items"] = [
    {
      label: "综合",
      key: "1"
    },
    {
      label: "其他",
      key: "2"
    }
  ];

  // 菜单点击处理函数
  const handleMenuClick = (e: any) => {
    message.info(`Click on menu item: ${e.key}`);
    setSelectedItem(e.item.props.children); // 更新选中的菜单项文字
  };

  const menuProps = {
    items,
    onClick: handleMenuClick
  };

  return (
    <div>
      <Dropdown menu={menuProps} trigger={["click"]}>
        <Button className="inputBotton sadowButton">
          <Space>
            {selectedItem} {/* 显示选中的菜单项 */}
            <DownOutlined style={{ width: "10px", height: "10px", marginRight: "calc(100% - 90px)" }} />
          </Space>
        </Button>
      </Dropdown>
      <Divider type="vertical" />
    </div>
  );
};

// 定义后缀组件
const RightSearch: React.FC = () => {
  return (
    <div>
      <div className="suffix">
        <img src={center_search} alt="" />
      </div>
    </div>
  );
};

interface CustomInputProps {
  placeholder?: string;
}

// 定义自定义输入组件
const CustomInput: React.FC<CustomInputProps> = ({ placeholder }) => {
  return (
    <div style={{ width: "100%", textAlign: "center" }}>
      <Input
        className="inputstyle"
        placeholder={placeholder}
        prefix={<LeftSearch />} // 传递React元素
        suffix={<RightSearch />} // 传递React元素
      />
    </div>
  );
};

export default CustomInput;
